<template>
  <div class="home">
    <el-form :model="point" label-width="80px">
      <el-form-item label="所属区域">
        <el-select v-model="point.areaId" placeholder="请选择">
          <el-option
            v-for="item in areaList"
            :key="item.id"
            :label="item.areaName"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="点位名称">
        <el-input v-model="point.content"></el-input>
      </el-form-item>
      <el-form-item label="点位描述">
        <el-input
          v-model="point.description"
          :rows="5"
          type="textarea"
        ></el-input>
      </el-form-item>
      <el-form-item label="经纬度">
        <el-input disabled v-model="point.longitude"></el-input>
        <el-input disabled v-model="point.latitude"></el-input>
        <SelectLocation
          style="width: 700px; height: 400px"
          :center="center"
          :selectedPosition="selectedPosition"
          @mapClick="handleSelectLocation"
        ></SelectLocation>
      </el-form-item>
      <el-form-item label="图标">
        <div @click="iconDialogVisible = true">
          <el-image
            style="width: 100px; height: 100px"
            :src="point.iconPath"
            v-if="point.iconPath"
          ></el-image>
          <el-icon v-else class="icon-image-icon"><Plus /></el-icon>
        </div>
      </el-form-item>
      <el-form-item label="图标宽度">
        <el-input v-model="point.width"></el-input>
      </el-form-item>
      <el-form-item label="图标高度">
        <el-input v-model="point.height"></el-input>
      </el-form-item>
      <el-form-item label="图片">
        <div @click="imageDialogVisible = true">
          <el-image
            style="width: 100px; height: 100px"
            :src="point.imagePath"
            v-if="point.imagePath"
          ></el-image>
          <el-icon v-else class="icon-image-icon"><Plus /></el-icon>
        </div>
      </el-form-item>
      <el-form-item label="详细介绍">
        <Editor v-model="point.detail" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSaveClick">保存</el-button>
      </el-form-item>
    </el-form>

    <el-dialog v-model="iconDialogVisible" title="Tips" width="800">
      <span>选择图标</span>
      <template #footer>
        <div class="dialog-footer">
          <Icon @select-icon="selectIcon" />
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="imageDialogVisible" title="Tips" width="800">
      <span>选择图片</span>
      <template #footer>
        <div class="dialog-footer">
          <Icon @select-icon="selectImage" />
        </div>
      </template>
    </el-dialog>
  </div>
</template>
    
  <script setup>
import { Plus, CircleCheck } from "@element-plus/icons-vue";
import { onMounted, reactive, toRefs } from "vue";
import Icon from "@/components/Icon.vue";
import SelectLocation from "@/components/SelectLocation.vue";
import http from "@/utils/http";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import Editor from "@/components/Editor.vue";
const router = useRouter();

// 组件列表
const components = { Icon, Editor };

const Data = reactive({
  point: {
    detail:''
  },
  pointId: "",
  iconDialogVisible: false,
  imageDialogVisible: false,
  areaList: [],
  center: { lat: 28.674993, lng: 121.4077192 }
});
const {
  point,
  iconDialogVisible,
  imageDialogVisible,
  areaList,
  center,
} = toRefs(Data);
onMounted(() => {
  if (router.currentRoute.value.query.pointId) {
    Data.pointId = router.currentRoute.value.query.pointId;
  }
  if (router.currentRoute.value.query.areaId) {
    Data.point.areaId = router.currentRoute.value.query.areaId;
  }
  init();
});
const init = () => {
  if (Data.pointId) {
    http.get("/point/ua/getPointById?id=" + Data.pointId).then((res) => {
      Data.point = res.data;
      if (!Data.point.detail) {
        Data.point.detail = "";
      }
      Data.center = { lat: res.data.latitude, lng: res.data.longitude };
    });
  } else if (Data.point.areaId) {
    http.get("/area/ua/getAreaById?id=" + Data.point.areaId).then((res) => {
      Data.center = { lat: res.data.latitude, lng: res.data.longitude };
    });
    Data.point.height = "31";
    Data.point.width = "31";
    Data.point.detail = "";
  } else {
    Data.point = {
      areaId: "",
      content: "",
      description: "",
      longitude: "",
      latitude: "",
      iconPath: "",
      width: "31",
      height: "31",
      imagePath: "",
      detail:''
    };
  }
  http.get("/area/ua/listAreas").then((res) => {
    res.data.forEach((element) => {
      element.id = String(element.id);
    });
    Data.areaList = res.data;
  });
};
const selectIcon = (item) => {
  console.log(item);
  Data.point.iconPath = item.filePath;
  Data.iconDialogVisible = false;
};
const selectImage = (item) => {
  console.log(item);
  Data.point.imagePath = item.filePath;
  Data.imageDialogVisible = false;
};
const handleSaveClick = () => {
  console.log(Data.point);
  if (!Data.point.id) {
    addPoint();
  } else {
    updatePoint();
  }
};
const addPoint = () => {
  http.post("/point/addPoint", Data.point).then((res) => {
    if (res.code === "0000") {
      ElMessage.success(res.message);
      router.go(-1);
    } else {
      ElMessage.error(res.message);
    }
  });
};
const updatePoint = () => {
  http.post("/point/updatePoint", Data.point).then((res) => {
    if (res.code === "0000") {
      ElMessage.success(res.message);
      router.go(-1);
    } else {
      ElMessage.error(res.message);
    }
  });
};

const handleSelectLocation = (item) => {
  console.log(item);
  Data.point.latitude = item.latLng.lat;
  Data.point.longitude = item.latLng.lng;
};
</script>
    
  <style scoped>
.home {
  padding: 20px;
}
</style>
    
  <script>
export default {
  name: "EditPoint",
};
</script>
    